<template>
	<view class="box">
		<view @click="change" :data-index="index" :data-url="item.url" :key="index" v-for="(item,index) in list" class="actBox">
			<image class="img" :src="`../../static/img/components/${index === actIndex?item.act:item.img}.png`">
			</image>
			<view class="title"  :class="index === actIndex?'act':''">{{item.title}}</view>
		</view>
	</view>
</template>

<script setup>
  import {reactive, ref,getCurrentInstance,onMounted} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	const {proxy} = getCurrentInstance()
	const actIndex = ref(0)
	const list = ref([])
	


	onMounted(()=>{
			// list.value=[{title:'首页',img:'home',act:'homeAct',url:'/pages/home/home'},
			// {title:'订单',img:'allclass',act:'allclassAct',url:'/pages/home/allClass'},
			// {title:'消息',img:'order',act:'orderAct',url:'/pages/order/order'},
			// {title:'我的',img:'user',act:'userAct',url:'/pages/user/user'},
			// ]
		
			list.value=[{title:'主页',img:'home',act:'homeAct',url:'/pages/home/home'},
			{title:'服务',img:'allclass',act:'allclassAct',url:'/pages/home/allClass'},
			{title:'订单',img:'order',act:'orderAct',url:'/pages/order/order'},
			{title:'我的',img:'user',act:'userAct',url:'/pages/user/user'},
			]
		
	})
	const emits = defineEmits(["actIndexfun"])
	const actIndexfun = () => {
			emits("actIndexfun", actIndex.value)
			console.log('命令已发送');
			
	} 
	const changes=()=>{
		actIndex.value=1
	}
	const change=(e)=> {
		actIndex.value = e.currentTarget.dataset.index
		actIndexfun()
	}
	defineExpose({
		changes
	})

</script>

<style lang="scss" scoped>
	.img {
		width: 50rpx;
		height: 50rpx;
	}
	.box {
		background-color: white;
		width: 750rpx;
		height: 140rpx;
		position: fixed;
		bottom: 0;
		box-shadow: 4rpx 4rpx 10rpx rgba(189, 189, 189, 0.4);
		display: flex;
		justify-content: space-around;
		z-index: 99999999999;

		.actBox {
			margin-top: 10rpx;
			display: flex;
			width: 100rpx;
			
			flex-direction: column;
			
			align-items: center;

			.act {
				color: #51a0fd;
			}
			.title{
				font-size: 22rpx;
				margin-top: 8rpx;
				
			}
		}
	}
</style>